/**
 * 路由器模块
 *
 * // 使用插件:内部会给vm对象和组件对象添加一个属性：
 Vue.use()
 */

import Vue from "vue";
import VueRouter from "vue-router";

import About from "../views/About";
import Home from "../views/Home";
import News from "../views/News";
import Message from "../views/Message";
import MessageDetail from "../views/MessageDetail";

// 声明使用vue-router插件
/*
内部定义并注册了2个组件标签(router-link/router-view),
给组件对象添加了2个属性:
  1. $router: 路由器
  2. $route: 当前路由
 */
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }, {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',// path最左侧的/永远代表跟路由
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              // 采用params方式传递参数 需要占位符
              path: 'detail/:id',
              // 这里采用query方式传递
              // path: 'detail',
              component: MessageDetail
            }
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        },
      ]
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})
